<script setup>
//数据
const iconList = [
    { imgName: "超市", desc: "超市便利" },
    { imgName: "菜市场", desc: "菜市场" },
    { imgName: "水果店", desc: "水果店" },
    { imgName: "鲜花", desc: "鲜花绿植" },
    { imgName: "医药健康", desc: "医药健康" },
    { imgName: "家居", desc: "家居时尚" },
    { imgName: "蛋糕", desc: "烘培蛋糕" },
    { imgName: "签到", desc: "签到" },
    { imgName: "大牌免运", desc: "大牌免运" },
    { imgName: "红包", desc: "红包套餐" }
]
</script>

<template>
  <!-- 定位 -->
  <div class="position">
        <span class="iconfont position_icon">&#xe619;</span>
        <span class="position_name">北京理工大学国防科技园2号楼10层</span>
        <span class="iconfont position_notice">&#xe7e5;</span>
    </div>
    <!-- 搜索 -->
    <div class="search">
        <span class="iconfont">&#xe632;</span>
        <span class="search_text">山姆会员商店优惠商品</span>
    </div>
    <!-- banner -->
    <div class="banner">
        <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="" class="banner_img">
    </div>
    <!-- 图标列表 -->
    <div class="icon_list">
        <div class="icon_item" v-for="item in iconList" :key="item.imgName">
            <img class="icon_item_img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
            <p class="icon_item_desc">{{ item.desc }}</p>
        </div>
    </div>
    <!-- 分割线 -->
    <div class="gap"></div>
</template>

<style lang="scss" scoped>
@import '@/style/mixins.scss';
@import '@/style/viriables.scss';

//定位
.position {
    position: relative;
    display: flex;
    align-items: center;
    line-height: .22rem;
    font-size: .16rem;
    padding: .16rem .24rem .16rem 0;
    
    .position_icon {
        font-size: .2rem;
    }
    &_name {
        @include ellipse;
        margin-left: .08rem;
        color: $content-fontcolor;
    }
    .position_notice {
        position: absolute;
        right: 0;
        font-size: .2rem;
    }
}

//搜索
.search {
    margin-bottom: .16rem;
    padding-left: .16rem;
    line-height: .32rem;
    background-color: #F5F5F5;
    border-radius: .16rem;

    &_text {
        margin-left: .12rem;
        font-size: .14rem;
        font-family: PingFangSC-Regular;
        color: #B7B7B7;
    }
}

//banner
.banner {
    &_img {
        width: 100%;
    }
}

//图标列表
.icon_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: .16rem;

    .icon_item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;

        &_img {
            width: .4rem;
            height: .4rem;
        }
        &_desc {
            margin: .06rem 0 .16rem 0;
        }
    } 
}

//分割线
.gap {
    height: .1rem;
    background-color: #F1F1F1;
    margin: 0 -0.18rem;
}
</style>